<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>商品列表</title>
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
  <style>
  	.layui-table-cell{
	  height: 60px;
	  line-height: 60px;
	}
  </style>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">商品名</label>
    <div class="layui-input-inline">
      <input type="text" name="name"  placeholder="请输入商品名" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<button type="button" class="layui-btn" style="display: none" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>
 
<table id="demo" lay-filter="test"></table>

 
<script src="../layui/layui.js"></script>
<script>
var goodsId=0;
layui.use(['table','form','jquery','upload'], function(){
  var table = layui.table;
  var form = layui.form;
  var $ = layui.jquery;
  var upload = layui.upload;
  
  var uploadInst = upload.render({
	    elem: '#test1' //绑定元素
    	,data: {
    		  id: function(){
    		    return goodsId;
    		  }
    		}
	    ,url: 'GoodsImgServlet' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      layer.msg('图片修改成功')
	      table.reload('demo')
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
  
  //渲染表格
  table.render({
    elem: '#demo'
    ,height: 512
    ,url: 'GoodsServlet?method=findAll' //数据接口
    ,page: true //开启分页
    ,limit:5
    ,limits:[5,10,15,20]
    ,toolbar: '#toolbarDemo'//绑定头工具栏
    ,cols: [[ //表头
      {field: 'id', title: 'ID'}
      ,{field: 'fileName', title: '图片',templet: '<div><img onclick="uploadImg({{d.id}})" title="点击更换图片" style="cursor:pointer;" width="60px" height="60px"  src="../images/{{d.fileName}}" /></div>'}
      ,{field: 'goodsName', title: '商品名'}
      ,{field: 'goodsDesc', title: '描述'}
      ,{field: 'price', title: '价格'} 
      ,{field: 'stock', title: '库存'}
      ,{field: 'status', title: '状态',templet:function(d){
    	  if(d.status==0){
    		  return '<input type="checkbox" lay-filter="sale" value="'+d.id+'"  lay-skin="switch" lay-text="上架|下架">'
    	  }else{
    		  return '<input type="checkbox" lay-filter="sale" value="'+d.id+'"  lay-skin="switch" lay-text="上架|下架" checked>'
    	  }
      }}
      ,{fixed: 'right',title: '操作',  width:200, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
//头工具栏触发事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'add':
    	  layer.open({
    		  type: 1,
    		  title:'添加商品',
    		  content: $('#add')
    		});
      break;
      case 'delete':
        layer.msg('删除');
      break;
      case 'update':
        layer.msg('编辑');
      break;
    };
  });
  
//行工具条事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'detail'){ //查看
      //do somehing
     	 //数据回显
    	form.val("detail",data );
    	layer.open({
    		  type: 1,
    		  title:'商品详情',
    		  content: $('#detail')
    		});
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
    	  $.post(
    		'GoodsServlet?method=del',{
    			id:data.id
    		},function(res){
    			obj.del();
    		}	  
    	  );
        layer.close(index);
        layer.msg('删除成功');
      });
    } else if(layEvent === 'edit'){ //编辑
      //do something
       //数据回显
      form.val("edit",data );
      layer.open({
    		  type: 1,
    		  title:'修改商品',
    		  content: $('#edit')
    		});
      
    }
  });
  
//监听提交
  form.on('submit(formDemo)', function(data){
    //layer.msg(JSON.stringify(data.field));
    //表格重载
    table.reload('demo', {
	  where: data.field //设定异步数据接口的额外参数
	  //,height: 300
	});
    return false;
  });
  
//监听修改表单提交
  form.on('submit(editBtn)', function(data){
	 $.post(
		'GoodsServlet?method=edit',
		data.field,
		function(res){
			layer.close(layer.index)
			table.reload('demo')
			layer.msg('修改成功')
		}
	 );
    return false;//阻止表单提交
  });
  
//监听添加表单提交
  form.on('submit(addBtn)', function(data){
	 $.post(
		'GoodsServlet?method=add',
		data.field,
		function(res){
			layer.close(layer.index)
			table.reload('demo')
			layer.msg('添加成功')
		}
	 );
    return false;//阻止表单提交
  });
  
  //监听开关事件
  form.on('switch(sale)', function(data){
	  console.log(data.value); //开关value值，也可以通过data.elem.value得到
	  $.post(
		'GoodsServlet?method=sale',
		{
			id:data.value
		},function(res){
			if(res=="success"){
				layer.msg('操作成功')
			}
		}
	  );
	});
  
});
</script>
</body>

<form id="detail" lay-filter="detail" style="display: none" class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">商品编号</label>
    <div class="layui-input-inline">
      <input type="text" name="id"  readonly="readonly" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">商品名</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsName"  readonly="readonly" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsDesc" readonly="readonly" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-inline">
      <input type="text" name="price"  readonly="readonly" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-inline">
      <input type="text" name="stock"  readonly="readonly" class="layui-input">
    </div>
  </div>
</form>

<form id="edit" lay-filter="edit" style="display: none" class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">商品编号</label>
    <div class="layui-input-inline">
      <input type="text" name="id"  readonly="readonly" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">商品名</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsName" required="required"  placeholder="请输入商品名" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsDesc"   placeholder="请输入商品描述" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-inline">
      <input type="number" name="price" min="0"  placeholder="请输入商品价格" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-inline">
      <input type="number" name="stock" min="0"  placeholder="请输入商品库存" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="editBtn">确定</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<form id="add" lay-filter="add" style="display: none" class="layui-form" action="">
    <div class="layui-form-item">
    <label class="layui-form-label">商品名</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsName" required="required"  placeholder="请输入商品名" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsDesc"   placeholder="请输入商品描述" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-inline">
      <input type="number" name="price" min="0"  placeholder="请输入商品价格" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-inline">
      <input type="number" name="stock" min="0"  placeholder="请输入商品库存" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">确定</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
	function uploadImg(id){
		layui.use('jquery',function(){
			var $ = layui.jquery;
			goodsId = id;
			$("#test1").click();
		})
		
	}
</script>
</html>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 头工具栏 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>